<template>
  <div class="profile-settings-form">
    <div class="form-header">
      <h3>账户设置</h3>
      <p>管理您的账户偏好设置</p>
    </div>

    <!-- 账户信息展示 -->
    <div v-if="userProfile" class="account-info">
      <div class="info-section">
        <h4>账户信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <label>用户名</label>
            <span>{{ userProfile.userName }}</span>
            <el-tag size="small" type="info">不可修改</el-tag>
          </div>
          <div class="info-item">
            <label>注册时间</label>
            <span>{{ formatDate(userProfile.createTime) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐私设置 -->
    <div class="settings-section privacy-settings">
      <div class="section-header">
        <div class="section-icon">
          <el-icon><Lock /></el-icon>
        </div>
        <div class="section-title">
          <h4>隐私设置</h4>
          <p class="section-subtitle">管理您的个人信息可见性</p>
        </div>
      </div>

      <div class="settings-content">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">个人资料可见性</div>
            <div class="setting-desc">控制其他用户是否可以查看您的个人资料</div>
          </div>
          <div class="setting-control">
            <el-radio-group
              v-model="privacySettings.profileVisibility"
              class="custom-radio-group"
            >
              <el-radio :value="'public'" class="custom-radio">
                <span class="radio-label">公开</span>
              </el-radio>
              <el-radio :value="'friends'" class="custom-radio">
                <span class="radio-label">仅好友</span>
              </el-radio>
              <el-radio :value="'private'" class="custom-radio">
                <span class="radio-label">私密</span>
              </el-radio>
            </el-radio-group>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">邮箱可见性</div>
            <div class="setting-desc">控制是否在个人资料中显示邮箱地址</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="privacySettings.emailVisible"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">手机号可见性</div>
            <div class="setting-desc">控制是否在个人资料中显示手机号码</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="privacySettings.phoneVisible"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 通知设置 -->
    <div class="settings-section notification-settings">
      <div class="section-header">
        <div class="section-icon">
          <el-icon><Bell /></el-icon>
        </div>
        <div class="section-title">
          <h4>通知设置</h4>
          <p class="section-subtitle">管理您接收通知的方式</p>
        </div>
      </div>

      <div class="settings-content">
        <!-- 通知类型开关 -->
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">关注通知</div>
            <div class="setting-desc">有用户关注你时收到通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.followEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('followEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">点赞通知</div>
            <div class="setting-desc">文章或评论被点赞时收到通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.likeEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('likeEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">收藏通知</div>
            <div class="setting-desc">文章被收藏时收到通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.collectEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('collectEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">评论通知</div>
            <div class="setting-desc">文章被评论时收到通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.commentEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('commentEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">回复通知</div>
            <div class="setting-desc">评论被回复时收到通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.replyEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('replyEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">@提及通知</div>
            <div class="setting-desc">被@提及时收到通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.mentionEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('mentionEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">系统通知</div>
            <div class="setting-desc">接收系统通知和公告</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.systemEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('systemEnabled', $event)"
            />
          </div>
        </div>

        <!-- 免打扰模式 -->
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">免打扰模式</div>
            <div class="setting-desc">在指定时间段内不接收通知推送</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.doNotDisturbEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleDoNotDisturbToggle"
            />
          </div>
        </div>

        <!-- 免打扰时间设置 -->
        <div class="setting-item time-picker-item">
          <div class="setting-info">
            <div class="setting-label">免打扰时间段</div>
            <div class="setting-desc">设置免打扰的开始和结束时间</div>
          </div>
          <div class="setting-control time-range-control">
            <el-time-picker
              v-model="doNotDisturbStartTime"
              placeholder="开始时间"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              :disabled="!notificationSettings.doNotDisturbEnabled"
              @change="handleTimeChange"
            />
            <span class="time-separator">至</span>
            <el-time-picker
              v-model="doNotDisturbEndTime"
              placeholder="结束时间"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              :disabled="!notificationSettings.doNotDisturbEnabled"
              @change="handleTimeChange"
            />
          </div>
        </div>

        <!-- 高级设置 -->
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">通知聚合</div>
            <div class="setting-desc">相同类型的通知会聚合显示</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.notificationAggregationEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="
                handleNotificationChange(
                  'notificationAggregationEnabled',
                  $event
                )
              "
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">实时推送</div>
            <div class="setting-desc">通过WebSocket实时接收通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.websocketEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="handleNotificationChange('websocketEnabled', $event)"
            />
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label">邮件通知</div>
            <div class="setting-desc">通过邮件接收重要通知</div>
          </div>
          <div class="setting-control">
            <el-switch
              v-model="notificationSettings.emailNotificationEnabled"
              class="custom-switch"
              active-color="#1e80ff"
              inactive-color="#dcdfe6"
              @change="
                handleNotificationChange('emailNotificationEnabled', $event)
              "
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="form-actions">
      <el-button
        type="primary"
        :loading="loading"
        class="submit-btn"
        @click="handleSaveSettings"
      >
        保存设置
      </el-button>
      <el-button @click="handleResetSettings">重置</el-button>
    </div>

    <!-- 危险操作区域 -->
    <div class="danger-zone">
      <h4>危险操作</h4>
      <div class="danger-actions">
        <el-button type="danger" plain @click="showDeactivateDialog = true">
          停用账户
        </el-button>
        <el-button type="danger" @click="showDeleteDialog = true">
          删除账户
        </el-button>
      </div>
      <p class="danger-warning">⚠️ 这些操作不可逆，请谨慎操作</p>
    </div>

    <!-- 停用账户确认对话框 -->
    <el-dialog
      v-model="showDeactivateDialog"
      title="停用账户"
      width="400px"
      center
    >
      <p>您确定要停用账户吗？停用后您将无法登录，但数据会保留。</p>
      <template #footer>
        <el-button @click="showDeactivateDialog = false">取消</el-button>
        <el-button type="danger" @click="handleDeactivateAccount"
          >确认停用</el-button
        >
      </template>
    </el-dialog>

    <!-- 删除账户确认对话框 -->
    <el-dialog v-model="showDeleteDialog" title="删除账户" width="400px" center>
      <p>您确定要删除账户吗？此操作不可逆，所有数据将被永久删除。</p>
      <template #footer>
        <el-button @click="showDeleteDialog = false">取消</el-button>
        <el-button type="danger" @click="handleDeleteAccount"
          >确认删除</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Lock, Bell } from "@element-plus/icons-vue";
import { type UserProfile } from "@/api/user-profile-update";
import {
  getNotificationSettingsApi,
  updateNotificationSettingsApi,
  setDoNotDisturbApi
} from "@/api/notification-settings";

interface Props {
  userProfile: UserProfile | null;
}

interface Emits {
  (e: "success"): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 加载状态
const loading = ref(false);

// 对话框显示状态
const showDeactivateDialog = ref(false);
const showDeleteDialog = ref(false);

// 隐私设置
const privacySettings = reactive({
  profileVisibility: "public",
  emailVisible: true,
  phoneVisible: false
});

// 通知设置
const notificationSettings = reactive({
  followEnabled: true,
  likeEnabled: true,
  commentEnabled: true,
  replyEnabled: true,
  mentionEnabled: true,
  systemEnabled: true,
  collectEnabled: true,
  doNotDisturbEnabled: false,
  notificationAggregationEnabled: true,
  websocketEnabled: true,
  emailNotificationEnabled: false
});

const doNotDisturbStartTime = ref("");
const doNotDisturbEndTime = ref("");

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return "";
  return new Date(dateString).toLocaleDateString("zh-CN");
};

// 加载通知设置
const loadNotificationSettings = async () => {
  try {
    const response = await getNotificationSettingsApi();
    if (response.code === 200 && response.data) {
      Object.assign(notificationSettings, response.data);
      doNotDisturbStartTime.value =
        response.data.doNotDisturbStart || "22:00:00";
      doNotDisturbEndTime.value = response.data.doNotDisturbEnd || "08:00:00";
    }
  } catch (error) {
    console.error("加载通知设置失败:", error);
  }
};

// 处理通知设置变更
const handleNotificationChange = async (key: string, value: boolean) => {
  try {
    const params = {
      [key]: value ? 1 : 0
    };
    const response = await updateNotificationSettingsApi(params);
    if (response.code === 200) {
      ElMessage.success("设置已更新");
    } else {
      ElMessage.error(response.message || "更新失败");
      (notificationSettings as any)[key] = !value;
    }
  } catch (error) {
    console.error("更新通知设置失败:", error);
    ElMessage.error("更新设置失败");
    (notificationSettings as any)[key] = !value;
  }
};

// 处理免打扰开关切换
const handleDoNotDisturbToggle = async (value: boolean) => {
  if (value) {
    if (!doNotDisturbStartTime.value) {
      doNotDisturbStartTime.value = "22:00:00";
    }
    if (!doNotDisturbEndTime.value) {
      doNotDisturbEndTime.value = "08:00:00";
    }
  }

  try {
    const response = await setDoNotDisturbApi({
      enabled: value ? 1 : 0,
      startTime: value ? doNotDisturbStartTime.value : undefined,
      endTime: value ? doNotDisturbEndTime.value : undefined
    });

    if (response.code === 200) {
      ElMessage.success(value ? "已开启免打扰模式" : "已关闭免打扰模式");
    } else {
      ElMessage.error(response.message || "操作失败");
      notificationSettings.doNotDisturbEnabled = !value;
    }
  } catch (error) {
    console.error("设置免打扰模式失败:", error);
    ElMessage.error("操作失败");
    notificationSettings.doNotDisturbEnabled = !value;
  }
};

// 处理时间变更
const handleTimeChange = async () => {
  if (!notificationSettings.doNotDisturbEnabled) return;

  if (!doNotDisturbStartTime.value || !doNotDisturbEndTime.value) {
    ElMessage.warning("请设置完整的时间段");
    return;
  }

  try {
    const response = await setDoNotDisturbApi({
      enabled: 1,
      startTime: doNotDisturbStartTime.value,
      endTime: doNotDisturbEndTime.value
    });

    if (response.code === 200) {
      ElMessage.success("免打扰时间段已更新");
    } else {
      ElMessage.error(response.message || "更新失败");
    }
  } catch (error) {
    console.error("更新免打扰时间段失败:", error);
    ElMessage.error("更新失败");
  }
};

// 保存设置
const handleSaveSettings = async () => {
  try {
    loading.value = true;

    // 这里应该调用API保存设置
    // const response = await saveUserSettingsApi({
    //   privacy: privacySettings,
    //   notification: notificationSettings
    // });

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));

    ElMessage.success("设置保存成功");
    emit("success");
  } catch (error) {
    console.error("保存设置失败:", error);
    ElMessage.error("保存设置失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

// 重置设置
const handleResetSettings = () => {
  privacySettings.profileVisibility = "public";
  privacySettings.emailVisible = true;
  privacySettings.phoneVisible = false;

  loadNotificationSettings();
  ElMessage.info("设置已重置");
};

// 组件挂载时加载通知设置
onMounted(() => {
  loadNotificationSettings();
});

// 停用账户
const handleDeactivateAccount = async () => {
  try {
    // 这里应该调用API停用账户
    // await deactivateAccountApi();

    ElMessage.success("账户已停用");
    showDeactivateDialog.value = false;
  } catch (error) {
    console.error("停用账户失败:", error);
    ElMessage.error("停用账户失败，请稍后重试");
  }
};

// 删除账户
const handleDeleteAccount = async () => {
  try {
    // 二次确认
    await ElMessageBox.confirm(
      "此操作将永久删除您的账户和所有数据，确定继续吗？",
      "最终确认",
      {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "error"
      }
    );

    // 这里应该调用API删除账户
    // await deleteAccountApi();

    ElMessage.success("账户已删除");
    showDeleteDialog.value = false;
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除账户失败:", error);
      ElMessage.error("删除账户失败，请稍后重试");
    }
  }
};
</script>

<style scoped lang="scss">
// 响应式设计
@media (width <= 768px) {
  .profile-settings-form {
    .account-info .info-grid {
      grid-template-columns: 1fr;
    }

    .settings-section {
      margin-bottom: 20px;
      border-radius: 12px;

      .section-header {
        padding: 20px 20px 16px;

        .section-icon {
          width: 40px;
          height: 40px;
          margin-right: 12px;

          .el-icon {
            font-size: 18px;
          }
        }

        .section-title {
          h4 {
            font-size: 18px;
          }

          .section-subtitle {
            font-size: 13px;
          }
        }
      }

      .settings-content {
        .setting-item {
          flex-direction: column;
          align-items: flex-start;
          padding: 16px 20px;

          .setting-info {
            width: 100%;
            margin-right: 0;
            margin-bottom: 12px;
          }

          .setting-control {
            display: flex;
            justify-content: flex-end;
            width: 100%;
          }
        }
      }
    }

    .custom-radio-group {
      flex-direction: column;
      gap: 8px;
      width: 100%;

      :deep(.el-radio) {
        justify-content: center;
        width: 100%;
      }
    }

    .form-actions {
      flex-direction: column;

      .el-button {
        width: 100%;
      }
    }

    .danger-zone {
      padding: 20px;
      border-radius: 12px;

      .danger-actions {
        flex-direction: column;

        .el-button {
          width: 100%;
        }
      }
    }
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .profile-settings-form {
    .settings-section {
      background: #1e293b;

      .section-header {
        background: linear-gradient(135deg, #334155 0%, #475569 100%);
        border-bottom-color: #475569;

        .section-title {
          h4 {
            color: #f1f5f9;
          }

          .section-subtitle {
            color: #94a3b8;
          }
        }
      }

      .settings-content {
        .setting-item {
          border-bottom-color: #334155;

          &:hover {
            background: #334155;
          }

          .setting-info {
            .setting-label {
              color: #f1f5f9;
            }

            .setting-desc {
              color: #94a3b8;
            }
          }
        }
      }
    }

    .custom-radio-group {
      :deep(.el-radio) {
        background: #334155;
        border-color: #475569;

        &:hover {
          background: #475569;
        }

        .el-radio__label {
          color: #cbd5e1;
        }
      }
    }
  }
}

.profile-settings-form {
  max-width: 800px;

  .form-header {
    margin-bottom: 32px;

    h3 {
      margin: 0 0 8px;
      font-size: 20px;
      font-weight: 600;
      color: #1f2937;
    }

    p {
      margin: 0;
      color: #6b7280;
    }
  }

  .account-info {
    padding: 24px;
    margin-bottom: 32px;
    background: #f9fafb;
    border-radius: 8px;

    h4 {
      margin: 0 0 16px;
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;

      .info-item {
        display: flex;
        gap: 8px;
        align-items: center;

        label {
          min-width: 80px;
          font-weight: 500;
          color: #6b7280;
        }

        span {
          color: #1f2937;
        }
      }
    }
  }

  // 优化后的设置区域样式
  .settings-section {
    margin-bottom: 32px;
    overflow: hidden;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 30px rgb(0 0 0 / 12%);
      transform: translateY(-2px);
    }

    .section-header {
      display: flex;
      align-items: center;
      padding: 24px 28px 20px;
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      border-bottom: 1px solid #e2e8f0;

      .section-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-right: 16px;
        background: linear-gradient(135deg, #1e80ff 0%, #4f46e5 100%);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(30 128 255 / 30%);

        .el-icon {
          font-size: 20px;
          color: white;
        }
      }

      .section-title {
        h4 {
          margin: 0 0 4px;
          font-size: 20px;
          font-weight: 700;
          color: #1e293b;
          letter-spacing: -0.025em;
        }

        .section-subtitle {
          margin: 0;
          font-size: 14px;
          font-weight: 400;
          color: #64748b;
        }
      }
    }

    .settings-content {
      padding: 8px 0;

      .setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 28px;
        border-bottom: 1px solid #f1f5f9;
        transition: all 0.2s ease;

        &:last-child {
          border-bottom: none;
        }

        &:hover {
          background: #f8fafc;
        }

        .setting-info {
          flex: 1;
          margin-right: 20px;

          .setting-label {
            margin-bottom: 4px;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.4;
            color: #1e293b;
          }

          .setting-desc {
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
            color: #64748b;
          }
        }

        .setting-control {
          flex-shrink: 0;

          &.time-range-control {
            display: flex;
            gap: 12px;
            align-items: center;

            .time-separator {
              font-size: 14px;
              color: #64748b;
            }

            :deep(.el-time-picker) {
              width: 140px;
            }
          }
        }
      }

      .time-picker-item {
        flex-direction: column;
        align-items: flex-start;

        .setting-control {
          width: 100%;
          margin-top: 12px;
        }
      }
    }
  }

  // 自定义单选按钮组样式
  .custom-radio-group {
    display: flex;
    gap: 8px;

    :deep(.el-radio) {
      padding: 8px 16px;
      margin-right: 0;
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      transition: all 0.2s ease;

      &:hover {
        background: #f0f9ff;
        border-color: #1e80ff;
      }

      &.is-checked {
        color: white;
        background: linear-gradient(135deg, #1e80ff 0%, #4f46e5 100%);
        border-color: #1e80ff;

        .el-radio__input {
          display: none;
        }

        .radio-label {
          font-weight: 600;
          color: white;
        }
      }

      .el-radio__input {
        display: none;
      }

      .el-radio__label {
        padding-left: 0;
        font-size: 14px;
        font-weight: 500;
        color: #475569;
      }
    }

    .radio-label {
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s ease;
    }
  }

  // 自定义开关样式
  .custom-switch {
    :deep(.el-switch__core) {
      width: 48px;
      height: 24px;
      border-radius: 12px;
      transition: all 0.3s ease;

      &::after {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
        transition: all 0.3s ease;
      }
    }

    &.is-checked {
      :deep(.el-switch__core) {
        background: linear-gradient(135deg, #1e80ff 0%, #4f46e5 100%);
        box-shadow: 0 2px 8px rgb(30 128 255 / 40%);
      }
    }
  }

  .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 0;

    .submit-btn {
      padding: 12px 32px;
      font-weight: 600;
      background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
      border: none;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 16px rgb(64 158 255 / 30%);
        transform: translateY(-2px);
      }

      &:active {
        transform: translateY(0);
      }

      &.is-loading {
        box-shadow: none;
        transform: none;
      }
    }
  }

  .danger-zone {
    position: relative;
    padding: 24px;
    margin-top: 40px;
    overflow: hidden;
    background: linear-gradient(135deg, #fef2f2 0%, #fdf2f8 100%);
    border: 2px solid #fecaca;
    border-radius: 16px;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: 4px;
      content: "";
      background: linear-gradient(90deg, #dc2626 0%, #e11d48 100%);
    }

    h4 {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 0 0 16px;
      font-size: 18px;
      font-weight: 700;
      color: #dc2626;

      &::before {
        font-size: 20px;
        content: "⚠️";
      }
    }

    .danger-desc {
      padding: 12px;
      margin-bottom: 20px;
      font-size: 14px;
      line-height: 1.6;
      color: #7f1d1d;
      background: rgb(255 255 255 / 60%);
      border-left: 4px solid #dc2626;
      border-radius: 8px;
    }

    .danger-actions {
      display: flex;
      gap: 12px;

      .el-button {
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.2s ease;

        &:hover {
          box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
          transform: translateY(-1px);
        }
      }
    }

    .danger-warning {
      margin: 0;
      font-size: 14px;
      color: #dc2626;
    }
  }
}
</style>
